<template>
  <li >
    <img :src="item.businessImg">
    <div class="business-info">
      <div class="business-info-h">
        <h3>{{item.businessName}}</h3>
        <div class="business-info-like">&#8226;</div>
      </div>
      <div class="business-info-star">
        <div class="business-info-star-left">
          <img src="../../assets/icons/home/star.png">
          <img src="../../assets/icons/home/star.png">
          <img src="../../assets/icons/home/star.png">
          <img src="../../assets/icons/home/star.png">
          <img src="../../assets/icons/home/star.png">
          <p>4.9 月售345单</p>
        </div>
        <div class="business-info-star-right">
          蜂鸟专送
        </div>
      </div>
      <div class="business-info-delivery">
        <p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
        <p>3.22km | 30分钟</p>
      </div>
      <div class="business-info-explain">
        <div>{{item.businessExplain}}</div>
      </div>
      <div class="business-info-promotion">
        <div class="business-info-promotion-left">
          <div class="business-info-promotion-left-icon">新</div>
          <p>饿了么首单用户立减9元</p>
        </div>
        <div class="business-info-promotion-right">
          <p>两个活动</p>
          <i class="fa fa-caret-down"></i>
        </div>
      </div>
      <div class="business-info-promotion">
        <div class="business-info-promotion-left">
          <div class="business-info-promotion-left-icon" style="background-color: #F1884F">特</div>
          <p> 特价商品五元起</p>
        </div>

      </div>
    </div>
  </li>
</template>

<script>


export default {
  props:["item"],
  mounted() {
    // console.log(666)
  }
}

</script>

<style scoped >
  li .business-info .business-info-star img{
    width: 15px;
    height: 15px;
  }
  /*推荐商家列表部分*/
   li{
    width: 100%;
    padding-bottom: 14vw;

  }
   li{
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    user-select: none;
    border-bottom: solid 1px #DDD;

    display: flex;

  }
   li img{
    width: 18vw;
    height: 18vw;
  }
   li .business-info{
    width: 100%;
    box-sizing: border-box;
    padding-left: 3vw;
  }
   li .business-info .business-info-h{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
  }
   li .business-info .business-info-h h3{
    font-size: 4vw;
    color: #333;

  }
   li .business-info .business-info-h .business-info-like{
    width: 1.6vw;
    height: 3.4vw;
    background-color: #666;
    color: white;
    font-size: 4vw;
    margin-right: 4vw;

    display: flex;
    justify-content: center;
    align-items: center;
  }
   li .business-info .business-info-star{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;
    font-size: 3.1vw;
  }
   li .business-info .business-info-star .business-info-star-left{
    display: flex;
    align-items: center;

  }
   li .business-info .business-info-star .business-info-star-left .fa-star{
    color: #FEC80E;
    margin-right: 0.5vw;
  }
   li .business-info .business-info-star .business-info-star-left p{
    color: #666;
    margin-left: 1vw;
  }
   li .business-info .business-info-star .business-info-star-right{
    background-color: #0097FF;
    color: #ffffff;
    font-size: 2.4vw;
    border-radius: 2px;
    padding: 0 0.6vw;
  }
   li .business-info .business-info-delivery{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;

    color: #666;
    font-size: 3.1vw;

  }
   li .business-info .business-info-explain{
    display: flex;
    align-items: center;
    margin-bottom: 3vw;

  }
   li .business-info .business-info-explain div{
    border: solid 1px #DDD;
    font-size: 2.8vw;
    color: #666;
    border-radius: 3px;
    padding: 0 0.1vw;
  }
   li .business-info .business-info-promotion{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.8vw;
  }
   li .business-info .business-info-promotion .business-info-promotion-left{
    display: flex;
    align-items: center;
  }
   li .business-info .business-info-promotion .business-info-promotion-left .business-info-promotion-left-icon{
    width: 4vw;
    height: 4vw;
    background-color: #70BC46;
    font-size: 3vw;
    color: white;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
   li .business-info .business-info-promotion .business-info-promotion-left p{
    color: #666;
    font-size: 3vw;
    margin-left: 2vw;
  }
   li .business-info .business-info-promotion .business-info-promotion-right{
    display: flex;
    align-items: center;
    font-size: 2.5vw;
    color: #999;
  }
   li .business-info .business-info-promotion .business-info-promotion-right p{
    margin-right: 2vw;
  }
</style>
